<template>
  <div class="store-info">
    <div class="return" @click="goBack">
      <Icon size="25" color="#000000" name="arrow-left" class="back" />
      <div class="title">
        <p class="text">商店信息</p>
      </div>
    </div>
    <van-image
        width="100%"
        height="200px"
        :src="getImageUrl(store.image)"
        alt="Store Image"
    />
    <div>
      <div class="container">
        <div class="description1">
          <h2>
            {{store.supplierName}}
          </h2>
          <van-tag color="rgb(230,230,230)" text-color="black">宠物店</van-tag>
          <van-tag color="rgb(230,230,230)" text-color="black" style="margin-left: 10px">宠物洗澡</van-tag>
          <van-tag color="rgb(230,230,230)" text-color="black" style="margin-left: 10px">很干净</van-tag>
        </div>
        <div class="box">
          <!-- 在这里添加内容 -->
          <div class="top-row">
            <span class="rating-value">{{rate}}</span>
            <span class="recommend-text">推荐</span>
          </div>
          <van-rate :value="parseFloat(this.rate)" size="15px" class="rating" />
        </div>
      </div>
      <div class="hour">
        <span style="font-size: 15px">{{store.description}}</span>
      </div>
      <div class="address">
        <span style="font-size: 15px">地址:{{store.address}}</span>
      </div>
      <button class="enter-btn" @click="enterForBuy(store.supplierId)">进店</button>
      <h3 style="margin-top: 0 ;margin-bottom: 10px; margin-left: 5px;">热门推荐</h3>
      <product-card-row :products="products"></product-card-row>
    </div>
  </div>
</template>

<script>
import {Image as VanImage, Tag as VanTag, Rate as VanRate, Icon} from 'vant';
import ProductCardRow from "@/components/ProductCardRow.vue";
import http from "@/plugins/http";

export default {
  mounted() {
    if (this.store && this.store.rate) {
      this.rate= this.store.rate;
    }
    this.loadPage()
  },
  data(){
    return{
      products:[],
      rate:''
    }
  },
  name:"storeInfo",
  components: {
    Icon,
    ProductCardRow,
    VanImage,
    VanTag,
    VanRate
  },
  props: {
    store: {
      type: Object,
      required: true
    }
  },
  methods: {
    enterForBuy(Id){
       this.$router.push({ name: 'goods', params: { Id } });
    },
    goBack() {
      this.$router.go(-1);
    },
    getImageUrl(imagePath) {
      return require(`@/${imagePath}`);
    },
    loadPage(){
      let v = this;
      console.log(v.store.supplierId)
      http.get('/product/findTop3/'+v.store.supplierId).then(res=>{
        if(res.statusCode==='200')
        {
          console.log(res.data)
          this.products=res.data;
        }
      })
    }
  }
};
</script>

<style>
/* 按钮样式 */
.enter-btn {
  background-color: #FFA500; /* 橙色背景 */
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  text-align: center;
}
/* 覆盖 van-rate 组件的星星颜色 */
.regulatory-page {
  background-color: #F6F7F9;
  height: 100vh;
}

.return {
  background-color: white;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.back {
  position: absolute;
  left: 10px;
  text-decoration: none;
}

.title {
  display: flex;
  align-items: center;
}

.text {
  margin: 0;
  color: #000000;
  font-size: 16px;
}
.van-rate__icon--full {
  color: rgb(25,106,250)
}
.store-info {
  padding: 16px 16px 200px;
}
.container {
  display: flex;
  align-items: flex-start; /* 让内容顶部对齐 */
}

.description1 {
  margin-top: 10px;
  width: 200px;
  height: 70px;
}
.hour{
  width:100%;
}
.address{
  width:100%;
  height:50px;
  line-height: 25px;
}

.box {
  margin-top: 10px;
  margin-left: auto; /* 将 box 推到右边 */
  border-radius: 8px; /* 圆角 */
  background-color: rgb(240,249,255); /* 背景颜色 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100px;
  height:70px
}

.top-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.rating-value {
  font-size: 30px;
  color: rgb(25, 106, 250);
  margin-left: 10px;
}

.recommend-text {
  margin-right: 10px;
  font-size: 15px;
  color: rgb(25, 106, 250);
}

.rating {
  align-self: center; /* 让评分在底部居中 */
}
</style>
